<template>
  <view :style="colorStyle">
    <view
      class="infobox1 flex aitems"
      :style="{ height: `${menuInfo.top + menuInfo.height}px` }"
    >
      <view class="block2 flex aitems" @click="back">
        <image src="@/static/img14.png" class="back" mode=""></image>
      </view>
      <view
        class="block1 flex aitems"
        @click="gourl(`/pages/seller/search?id=${user.id}`)"
      >
        <view class="icon">
          <u-icon name="search" size="24" color="#fff"></u-icon>
        </view>
        <view class="input cfff f28"> 搜索 </view>
      </view>
    </view>
    <view class="bg">
      <image :src="user.backImg" mode="aspectFill"></image>
    </view>

    <!-- <view :style="navTitleModuleStyle2"> </view> -->

    <view class="infobox2 flex aitems" :style="navTitleModuleStyle2">
      <image :src="user.logo" mode="aspectFill"></image>
      <view class="block1">
        <view class="info1 cfff f36 fontWeight">
          {{ user.name }}
        </view>
        <view class="info2 flex aitems">
          <image
            src="@/static/img7.png"
            mode=""
            v-for="(item, index, key) in user.score"
            :key="'score' + index"
          ></image>
          <image
            src="@/static/img47.png"
            mode=""
            v-for="(item, index, key) in 5 - user.score"
            :key="'score' + index"
          ></image>
        </view>
      </view>
    </view>

    <!-- <view class="infobox3">
			<view class="block2 flex aitems sa f32 cfff">
				<view class="info1" @click="morenChange">
					<view :class="screenType == 1 ? 'tip1 themeColor' : 'tip1'">
						默认
					</view>
				</view>
				<view class="info1 flex aitems" @click="priceChange">
					<view :class="priceType !=='' ? 'tip1 themeColor' : 'tip1'">
						价格
					</view>
					<view class="arrow-down-fill">
						<u-icon name="arrow-up-fill" :color="priceType == 2 ? 'var(--view-theme)' : '#fff'"
							size="8"></u-icon>
						<u-icon name="arrow-down-fill" :color="priceType == 1 ? 'var(--view-theme)' : '#fff'"
							size="8"></u-icon>
					</view>
				</view>
				<view class="info1 flex aitems" @click="saleChange">
					<view :class="saleType !=='' ? 'tip1 themeColor' : 'tip1'"> 销量 </view>
					<view class="arrow-down-fill">
						<u-icon name="arrow-up-fill" :color="saleType == 2 ? 'var(--view-theme)' : '#fff'"
							size="8"></u-icon>
						<u-icon name="arrow-down-fill" :color="saleType == 1 ? 'var(--view-theme)' : '#fff'"
							size="8"></u-icon>
					</view>
				</view>
				<view class="info1 flex aitems" @click="viewTabChange">
					<image src="@/static/img91.png" v-if="viewType == 1" class="icon" mode=""></image>
					<image src="@/static/img89.png" v-if="viewType == 2" class="icon" mode=""></image>
				</view>
			</view>
		</view> -->

    <view class="" style="height: 436rpx"> </view>
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, indexs, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>

    <view class="infobox4 flex">
      <scroll-view class="left" scroll-y="true">
        <view
          v-for="(item, index, key) in catelist"
          :key="key"
          class="list"
          @click="cateleftListChange(index)"
        >
          <view
            :class="
              cateleftListindex == index
                ? 'name c525252 f24 active fontWeight'
                : 'name c525252 f24'
            "
          >
            {{ item.name }}
          </view>
        </view>
        <view class="" style="height: 50rpx"> </view>
      </scroll-view>
      <scroll-view class="right" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="block2 flex aitems between">
          <view
            :class="
              screenType == 1 ? 'info1 themeColor f24' : 'info1 c858585 f24'
            "
            @click="morenChange"
          >
            默认
          </view>
          <view class="info1 flex aitems between f24" @click="saleChange">
            <view :class="saleType !== '' ? 'tip1 themeColor' : 'tip1 c858585'">
              销量
            </view>
            <view class="arrow-down-fill">
              <u-icon
                name="arrow-up-fill"
                :color="saleType == 2 ? 'var(--view-theme)' : '#858585'"
                size="6"
              ></u-icon>
              <u-icon
                name="arrow-down-fill"
                :color="saleType == 1 ? 'var(--view-theme)' : '#858585'"
                size="6"
              ></u-icon>
            </view>
          </view>
          <view class="info1 flex aitems between f24" @click="priceChange">
            <view
              :class="priceType !== '' ? 'tip1 themeColor' : 'tip1 c858585'"
            >
              价格
            </view>
            <view class="arrow-down-fill">
              <u-icon
                name="arrow-up-fill"
                :color="priceType == 2 ? 'var(--view-theme)' : '#858585'"
                size="6"
              ></u-icon>
              <u-icon
                name="arrow-down-fill"
                :color="priceType == 1 ? 'var(--view-theme)' : '#858585'"
                size="6"
              ></u-icon>
            </view>
          </view>
          <!-- <view class="info1 flex aitems" @click="viewTabChange">
						<image src="@/static/img87.png" v-if="viewType == 1" class="icon" mode=""></image>
						<image src="@/static/img88.png" v-if="viewType == 2" class="icon" mode=""></image>
					</view> -->
        </view>
        <view class="block3">
          <view
            class="goodslist flex aitems"
            v-for="(item, index, key) in list"
            :key="key"
            @click="gourl(`/pages/goods/detail?id=${item.id}`)"
          >
            <image :src="item.img" class="img" mode="aspectFill"></image>
            <view class="goodsinfo flex column between">
              <view class="">
                <view class="name ellipsis1 c1F1F1F f28">
                  {{ item.name }}
                </view>
                <view class="labelbox">
                  <view
                    class="label themeColor"
                    v-for="(items, indexs, keys) in item.tagName.split(',')"
                    v-if="items"
                    :key="keys"
                  >
                    {{ items }}
                  </view>
                </view>
              </view>
              <view class="pricebox flex aitems between">
                <view class="price flex aitems cF65B49 fontWeight">
                  <view class="priceinfo1 flex aitems">
                    <view class="tip1 f24"> ￥ </view>
                    <view class="tip2 f32">
                      {{ item.goodsPrice }}
                    </view></view
                  ><view class="priceinfo2 flex aitems">
                    <view class="tip1 f20"> ￥ </view>
                    <view class="tip2 f28">
                      {{ item.marketPrice }}
                    </view></view
                  >
                </view>
                <view class="sale f24 c858585">
                  销量：{{ item.salesVolume + item.salesVolumeVirtual }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <nodata v-if="list.length == 0" />

        <view class="" style="height: 50rpx"> </view>
      </scroll-view>
    </view>

    <!-- <nodata v-if="list.length == 0" /> -->
    <!-- <view class="" style="height: 100rpx"> </view> -->

    <custom-tab-bar
      :activeIndex="1"
      :sellerId="user.id"
      :user="user"
      :list="[]"
    ></custom-tab-bar>
  </view>
</template>

<script>
import customTabBar from "./tabbar.vue";
import { getToken, setStorage, getStorage } from "@/utils/storage.js";
import {
  sellerInfo,
  goodsPage,
  sellerGoodsCategoryList,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { loading, go, back } from "@/utils/wxAPI";
export default {
  mixins: [colors],
  components: {
    customTabBar,
  },
  data() {
    return {
      menuInfo: {},
      navTitleModuleStyle: "",
      navTitleModuleStyle2: "",
      user: {
        score: 0,
      },
      options: {},

      screenType: "",
      priceType: "",
      saleType: "",
      params: {},
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
      viewType: 1, //1列表 2左右

      catelist: [
        {
          name: "热销区",
          id: "",
        },
        {
          name: "酒水饮料",
          id: "",
        },
        {
          name: "时令水果",
          id: "",
        },
        {
          name: "日常用品",
          id: "",
        },
        {
          name: "热销区",
          id: "",
        },
        {
          name: "酒水饮料",
          id: "",
        },
        {
          name: "时令水果",
          id: "",
        },
        {
          name: "日常用品",
          id: "",
        },
        {
          name: "热销区",
          id: "",
        },
        {
          name: "酒水饮料",
          id: "",
        },
        {
          name: "时令水果",
          id: "",
        },
        {
          name: "日常用品",
          id: "",
        },
        {
          name: "热销区",
          id: "",
        },
        {
          name: "酒水饮料",
          id: "",
        },
        {
          name: "时令水果",
          id: "",
        },
        {
          name: "日常用品",
          id: "",
        },
        {
          name: "热销区",
          id: "",
        },
        {
          name: "酒水饮料",
          id: "",
        },
        {
          name: "时令水果",
          id: "",
        },
        {
          name: "日常用品",
          id: "",
        },
        {
          name: "热销区",
          id: "",
        },
        {
          name: "酒水饮料",
          id: "",
        },
        {
          name: "时令水果",
          id: "",
        },
        {
          name: "日常用品",
          id: "",
        },
      ],
      cateleftListindex: 0,
    };
  },
  async onLoad(options) {
    this.options = options;
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${
      this.menuInfo.height + this.menuInfo.top + 10
    }px`;
    this.navTitleModuleStyle2 = `top:calc(${
      this.menuInfo.height + this.menuInfo.top
    }px)`;
    // #endif
    // #ifdef H5
    this.navTitleModuleStyle2 = `top:calc(100rpx)`;
    // #endif

    if (getToken()) {
      this.sellerInfo();
      this.sellerGoodsCategoryList();
      this.handleGoodsPage();
    }
  },
  methods: {
    async sellerInfo() {
      loading();
      let { data } = await sellerInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.user = info;
      }
      uni.hideLoading();
    },
    saleChange() {
      this.priceType = "";
      this.screenType = "";
      if (this.saleType == "") {
        this.saleType = 2;
      } else if (this.saleType == 2) {
        this.saleType = 1;
      } else if (this.saleType == 1) {
        this.saleType = "";
      }
      this.params.orderByAsc = this.saleType == 1 ? "salesVolume" : "";
      this.params.orderByDesc = this.saleType == 2 ? "salesVolume" : "";
      this.current = 1;
      this.handleGoodsPage();
    },
    priceChange() {
      this.saleType = "";
      this.screenType = "";
      if (this.priceType == "") {
        this.priceType = 2;
      } else if (this.priceType == 2) {
        this.priceType = 1;
      } else if (this.priceType == 1) {
        this.priceType = "";
      }
      this.params.orderByAsc = this.priceType == 1 ? "goodsPrice" : "";
      this.params.orderByDesc = this.priceType == 2 ? "goodsPrice" : "";
      this.current = 1;
      this.handleGoodsPage();
    },
    viewTabChange() {
      if (this.viewType == 1) {
        this.viewType = 2;
      } else {
        this.viewType = 1;
      }
    },
    morenChange() {
      this.priceType = "";
      this.saleType = "";
      this.screenType = 1;
      this.current = 1;
      this.params = {};
      this.handleGoodsPage();
    },
    async sellerGoodsCategoryList() {
      let { data } = await sellerGoodsCategoryList({
        sellerId: this.options.id,
        parentId: 0,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        list.unshift({
          name: "全部",
          id: "",
        });
        this.catelist = list;
      }
    },
    async handleGoodsPage() {
      loading();
      let { data } = await goodsPage({
        current: this.current,
        size: 10,
        ...this.params,
        sellerId: this.options.id,
        sellerGoodsCategoryId: this.catelist[this.cateleftListindex].id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    cateleftListChange(index) {
      this.cateleftListindex = index;
      this.current = 1;
      this.handleGoodsPage();
    },
    back() {
      back();
    },
    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.handleGoodsPage();
  },
  onPullDownRefresh() {
    this.sellerInfo();
    this.current = 1;
    this.handleGoodsPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #fff;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}

.bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 436rpx;
  z-index: 999;

  image {
    width: 100%;
    height: 100%;
  }
}

.infobox1 {
  // background: #fff;
  padding: 0 0 22rpx 0;
  position: fixed;
  width: 100%;
  z-index: 99999;
  /* #ifdef H5 */
  height: 90rpx;
  /* #endif */

  .block2 {
    position: absolute;
    bottom: 26rpx;
    left: 30rpx;
    z-index: 999;

    .back {
      width: 48rpx;
      height: 48rpx;
    }

    .headimg {
      width: 64rpx;
      height: 64rpx;
      border-radius: 57rpx;
      margin-left: 10rpx;
    }
  }

  .block1 {
    border-radius: 44rpx;
    background: rgba(255, 255, 255, 0.4);
    width: 430rpx;
    /* #ifdef H5 */
    width: calc(100% - 30rpx - 30rpx - 48rpx - 40rpx);
    /* #endif */
    position: absolute;
    bottom: 18rpx;
    padding: 0 4rpx;
    left: calc(20rpx + 48rpx + 40rpx);
    height: 64rpx;

    .icon {
      margin-left: 28rpx;
    }

    .input {
      margin-left: 16rpx;
    }

    .btn {
      position: absolute;
      right: 0;
      border-radius: 44rpx;
      background: var(--view-theme);
      padding: 15rpx 47rpx;
    }
  }
}

.infobox2 {
  position: fixed;
  margin: 0 30rpx 0;
  z-index: 999;
  padding: 54rpx 0 0;
  width: calc(100% - 30rpx - 54rpx);

  image {
    width: 88rpx;
    height: 88rpx;
    border-radius: 16rpx;
  }

  .block1 {
    margin-left: 16rpx;
    width: calc(100% - 16rpx - 88rpx);

    .info1 {
    }

    .info2 {
      margin: 8rpx 0 0;

      image {
        width: 30rpx;
        height: 30rpx;
        margin: 0 12rpx 0 0;
      }
    }
  }
}

.infobox3 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 436rpx;
  z-index: 999;

  .block2 {
    // margin: 40rpx 0 0;
    position: absolute;
    bottom: 24rpx;
    width: 100%;

    .info1 {
      .icon {
        width: 30rpx;
        height: 30rpx;
      }

      .tip1 {
      }

      .arrow-down-fill {
        margin-left: 12rpx;
      }
    }
  }
}

.goodsModule {
  margin: 30rpx 30rpx 0;

  .goodslist {
    background: #fff;
    border-radius: 24rpx;
    padding: 16rpx;
    margin: 0 0 24rpx 0;

    .goodsimg {
      width: 230rpx;
      height: 230rpx;
      border-radius: 24rpx;
    }

    .goodsinfo {
      width: calc(100% - 230rpx - 16rpx);
      margin-left: 16rpx;
      height: 260rpx;

      .block1 {
        width: 100%;

        .goodsname {
        }

        .goodslabel {
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            padding: 4rpx 18rpx;
            border: 1px solid var(--view-theme);
            border-radius: 8rpx;
            margin: 0 20rpx 0 0;
          }
        }
      }

      .block2 {
        color: var(--view-theme);

        .unit {
          position: relative;
          top: 16rpx;
        }

        .price {
        }
      }
    }
  }

  .goodslist2 {
    background: #fff;
    border-radius: 24rpx;
    padding: 16rpx 0;
    width: 335rpx;
    margin: 0 0 24rpx 0;

    .goodsimg {
      width: 303rpx;
      height: 303rpx;
      border-radius: 24rpx;
      margin: auto;
    }

    .goodsinfo {
      width: 303rpx;
      margin: auto;
      padding: 16rpx 0 0;
      // width: calc(100% - 230rpx - 16rpx);
      // margin-left: 16rpx;
      // height: 260rpx;

      .block1 {
        width: 100%;

        .goodsname {
        }

        .goodslabel {
          margin: 16rpx 0;

          .label {
            color: var(--view-theme);
            padding: 4rpx 18rpx;
            border: 1px solid var(--view-theme);
            border-radius: 8rpx;
            margin: 0 20rpx 0 0;
          }
        }
      }

      .block2 {
        color: var(--view-theme);

        .unit {
          position: relative;
          top: 16rpx;
        }

        .price {
        }
      }
    }
  }
}

.infobox4 {
  height: calc(100vh - 436rpx - 120rpx);
  // top: 298rpx;
  position: relative;

  .left {
    width: 166rpx;
    background: #f5f5f5;

    .list {
      .name {
        padding: 46rpx 20rpx;
        text-align: center;
      }

      .active {
        background: #fff;
        color: var(--view-theme);
      }
    }
  }

  .right {
    width: calc(100% - 166rpx - 56rpx);
    padding: 24rpx 28rpx;
    background: #fff;

    .block1 {
      swiper {
        height: 171rpx;

        image {
          width: 540rpx;
          height: 171rpx;
          border-radius: 28rpx;
        }
      }
    }

    .block2 {
      // padding: 0 44rpx;

      .info1 {
        .icon {
          width: 30rpx;
          height: 30rpx;
        }

        .tip1 {
        }

        .arrow-down-fill {
          margin-left: 8rpx;
        }
      }
    }

    .block3 {
      margin: 30rpx 0 0;

      .goodslist {
        margin: 0 0 50rpx 0;

        .img {
          width: 180rpx;
          height: 180rpx;
          border-radius: 28rpx;
        }

        .goodsinfo {
          height: 180rpx;
          margin-left: 20rpx;
          width: calc(100% - 20rpx - 180rpx);

          .name {
          }

          .labelbox {
            margin: 16rpx 0 0;

            .label {
              font-size: 18rpx;
              padding: 8rpx 12rpx;
              border: 1px solid var(--view-theme);
              display: inline-block;
              border-radius: 8rpx;
              margin: 0 10rpx 0 0;
            }
          }

          .pricebox {
            // margin: 40rpx 0 0;
            .price {
              .priceinfo2 {
                margin-left: 8rpx;
                text-decoration: line-through;
                color: #999;
              }
              .tip1 {
              }

              .tip2 {
              }
            }

            .sale {
            }
          }
        }
      }
    }
  }
}
</style>
